<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>AppBar</title>
		<!-- MDUI CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
		    integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
		<link rel="stylesheet" type="text/css" href="../css/alert-js.css">
		<link rel="stylesheet" type="text/css" href="../css/appbar.css">
		<link rel="shortcut icon" href="../img/icon.png">
	</head>
	<body class="mdui-theme-primary-indigo mdui-color-blue-200 mdui-drawer-body-left">
		<!-- Check For JavaScript -->
		<noscript>
		    <div class="alert-js">
		        <p>啊哦，<code> JavaScript </code>似乎无法正常使用。请尝试打开<code> JavaScript </code>以获得最佳体验！</p>
		    </div>
		</noscript>
		
		<!-- SideBar -->
		<div class="mdui-drawer" id="drawer">
		  <ul class="mdui-list">
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
		      <div class="mdui-list-item-content">Inbox</div>
		    </li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">star</i>
		      <div class="mdui-list-item-content">Starred</div>
		    </li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
		      <div class="mdui-list-item-content">Sent mail</div>
		    </li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">drafts</i>
		      <div class="mdui-list-item-content">Drafts</div>
		    </li>
		    <li class="mdui-subheader">Subheader</li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">email</i>
		      <div class="mdui-list-item-content">All mail</div>
		    </li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
		      <div class="mdui-list-item-content">Trash</div>
		    </li>
		    <li class="mdui-list-item mdui-ripple">
		      <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
		      <div class="mdui-list-item-content">Spam</div>
		    </li>
		  </ul>
		</div>
		
		<!-- AppBar -->
		<div class="mdui-appbar">
		  <div class="mdui-toolbar mdui-color-theme">
		    <a href="javascript:;" id="toggle" class="mdui-btn mdui-btn-icon"><i
		            class="mdui-icon material-icons">menu</i></a>
		    <a href="javascript:show();" class="mdui-typo-headline">MDUI</a>
		    <a href="https://heyos.gitee.io/mdui" class="mdui-typo-title">Home</a>
		    <div class="mdui-toolbar-spacer"></div>
		    <a href="javascript:show();" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
		    <a href="javascript:show();" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
		    <a href="javascript:show();" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
		  </div>
		</div>
		
		<!-- Contents -->
		<div class="content mdui-typo mdui-text-center">
			<h1>Content Here...</h1>
			<h1><a href="javascript:gitee();" >更多</a></h1>
		</div>
		<!-- MDUI JS -->
		<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
		    integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
		    crossorigin="anonymous"></script>
		<script src="../js/appbar.js"></script>
	</body>
</html>
